<template>
	<view class="filmDetail-container">
		<!-- 背景-->
		<view class="top">
			<image :src="filmDetail.pic.large" mode="widthFix" class="film-bg-img"></image>
		</view>
		<!-- 封面 -->
		<view class="film-cover">
			<image :src="filmDetail.pic.normal" mode="" class="cover-img"></image>
			<view class="film-info">
				<view class="film-name">
					{{filmDetail.title}}
				</view>
				<view class="film-rating">
					{{filmDetail.rating.value}}分 {{filmDetail.rating.count}}人评价
				</view>
			</view>
		</view>
		<!-- 电影介绍 -->
		<view class="film-infos">
			<view class="intro">
				<text class="info">电影简介:</text><text>{{filmDetail.card_subtitle}}</text>
			</view>
			<view class="time">
				<text class="info">首映时间:</text><text>{{filmDetail.pubdate[0]}}</text>
			</view>
			<view class="desc">
				<text class="info">剧情介绍:</text><text>{{filmDetail.intro}}</text>
			</view>
		</view>
		<!-- 收藏 -->
		<button type="default" class="btn-fav" @click="gotoMyFav">收藏</button>
		<button type="default" class="btn-fav" @click="gotoplay">播放</button>
		<!-- 演员列表 -->
		<view class="film-actor">
			<text class="title">演员:</text>
			<view class="film-actor-list">
				<view class="film-actor-item" v-for="(item,index) in filmDetail.actors" :key='index'>
					<image src="../../static/imgs/actor.jpg" mode="" class="actor-img"></image>
					<view class="actor-name">
						{{item.name}}
					</view>
				</view>
			</view>
			
		</view>
		<!-- 评论列表 -->
		<view class="film-remark">
			<text class="title">评论:</text>
			<view class="film-remark-list" v-for="(item,index) in filmRemark" :key='index'>
				<view class="user-left">
					<image :src="item.user.avatar" mode="" class="avatar"></image>
				</view>
				<view class="user-right">
					<text class="user-name">
						{{item.user.name}}
					</text>
					<text class="user-time">{{item.create_time}}</text>
					<text class="user-remark" user-select>{{item.comment}}</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filmId:null,
				filmRemark:{},
				filmDetail:{},
				userinfo:{},
				// favlist:{}
			};
		},
		methods:{
			getcomments(){
				uni.request({
					url:'https://m.douban.com/rexxar/api/v2/movie/'+this.filmId+'/interests?start=0＆count=10&order_by=time',
					method:"GET",
					success:res=>{
						// console.log(res)
						this.filmRemark=res.data.interests
					}
				})
			},
			getFilmDetail(){
				uni.request({
					url:'https://m.douban.com/rexxar/api/v2/movie/'+this.filmId,
					method:"GET",
					success:res=>{
						// console.log(res)
						res.data.actors.length==3
						this.filmDetail=res.data
						// console.log(this.filmDetail)
					}
				})
			},
			//收藏
			gotoMyFav(){
				if(!this.userinfo){
					uni.showModal({
						title:'提示',
						content:'请先登录',
						success:res=>{
							// console.log(res)
							if(res.confirm){
								uni.switchTab({
									url:'../../pages/my/my'
								})
							}
						}
					})
					return
				}
				// console.log('11')
				// this.favlist=this.filmDetail
				// uni.setStorageSync('favlist',this.favlist)
				// var favlist=uni.getStorageSync('favlist')||{}
				// favlist[this.filmId]=this.filmDetail
				// console.log('111122')
				// console.log(favlist[this.filmId])
				// uni.setStorageSync('favlist',favlist)
				// uni.showModal({
				// 	title:'收藏成功',
				// 	image:'../../static/imgs/success.png'
				// })
				// uni.switchTab({
				// 	url:'../../pages/my/my'
				// })
				
				var favlist=uni.getStorageSync('favlist')||{}
				this.filmDetail.cover.url=this.filmDetail.cover_url
				favlist[this.filmId]=this.filmDetail
				uni.setStorageSync('favlist',favlist)
				uni.showModal({
					title:'收藏成功',
					success:res=>{
						uni.switchTab({
							url:'../../pages/my/my'
						})
					}
					
				})
				
				// console.log('111')
				// console.log(favlist)
			},
			// 播放
			gotoplay(){
				uni.navigateTo({
					url:'../../subpkg/player/player?url='+this.filmDetail.trailer.video_url
					// url:'../../subpkg/play/play'
				})
			}
		},
		
		onLoad(options) {
			this.filmId=options.id
			// console.log(options.id)
			this.userinfo=uni.getStorageSync('userinfo')
			this.getcomments()
			this.getFilmDetail()
		}
	}
</script>

<style lang="scss">
.filmDetail-container{
	//背景和封面
	.top{
		width: 100%;
		height: 310rpx;
		overflow: hidden;
		.film-bg-img{
			width: 100%;
			z-index: -999;
			// border: 1px solid red;
		}
	}
	.film-cover{
		width: 100%;
		z-index: 999;
		// border: 1px solid red;
		position: absolute;
		top: 80rpx;
		display: flex;
		margin-bottom: 20rpx;
		.cover-img{
			width: 200rpx;
			height: 280rpx;
			padding-left: 60rpx;
			// border: 5px solid yellow;
		}
		.film-info{
			color: #FFFFFF;
			font-weight: bold;
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			z-index: 999;
			.film-name{
				margin: 50rpx 0 60rpx 0;
			}
			.film-rating{
				font-size: 28rpx;
				// margin-top: -50rpx;
			}
		}
	}
	//
	.film-infos{
		font-size: 28rpx;
		padding-left: 20rpx;
		// border: 1px solid blue;
		margin-top: 80rpx;
		.intro{
			margin-bottom: 15rpx;
			.info{
				color: #42bd56;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}
		.time{
			margin-bottom: 15rpx;
			.info{
				color: #42bd56;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}
		.desc{
			margin-bottom: 15rpx;
			.info{
				color: #42bd56;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}
	}
	//收藏
	.btn-fav{
		width: 400rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: 1px solid red;
		color: red;
		font-size: 30rpx;
		font-weight: bold;
		margin: 20rpx auto;
	}
	//演员列表
	.film-actor{
		width: 100%;
		font-size: 32rpx;
		margin-top: 20rpx;
		.title{
			width: 100vw;
			padding: 15rpx 0;
			padding-left: 20rpx;
			border-left: 8rpx solid #42bd56;
			// border: 1px solid red;
			margin-bottom: 20rpx;
			// border-bottom: 1px solid #CCC;
		}
		.film-actor-list{
			margin-top: 20rpx;
			border-top: 1px solid #CCC;
			display: flex;
			padding: 0 12rpx;
			.film-actor-item{
				width: 25%;
				padding:0 8rpx ;
				box-sizing: border-box;
				margin-top: 15rpx;
				// border: 1px solid red;
				text-align: center;
				// overflow: hidden;
				.actor-img{
					width: 170rpx;
					height: 280rpx;
					
				}
				.actor-name{
					font-size: 26rpx;
					font-weight: bold;
				}
			}
		}
	}
	
	// 评论列表
	.film-remark{
		margin-top: 20rpx;
		margin-bottom: 50rpx;
		.title{
			width: 100vw;
			padding: 15rpx 0;
			padding-left: 20rpx;
			border-left: 8rpx solid #42bd56;
			// border: 1px solid red;
			margin-bottom: 30rpx;
			// border-bottom: 1px solid #CCC;
			padding-bottom: 20rpx;
		}
		.film-remark-list{
			margin-top: 30rpx;
			border-top: 1px solid #CCC;
			display: flex;
			.user-left{
				width: 14%;
				padding:20rpx 12rpx;
				.avatar{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.user-right{
				width: 100%;
				display: flex;
				flex-direction: column;
				padding-top: 15rpx;
				// border: 1px solid red;
				.user-name{
					font-size: 30rpx;
					font-weight: bold;
				}
				.user-time{
					font-size: 26rpx;
					color: #999;
					padding: 12rpx 0;
				}
				.user-remark{
					font-size: 28rpx;
				}
			}
		}
	}
	
}
</style>
